<template>
    <div>
      <div class="container">
        <ul id="teacherList">
          <li v-for="teacher in pageInfo.list">
            <a :href="'http://localhost:8080/#/teacherDetail/'+teacher.id"><img :src="teacher.avatar" width="100px"></a>
            <p><a :href="'http://localhost:8080/#/teacherDetail/'+teacher.id">{{teacher.name}}</a></p>
            <p>{{teacher.career}}</p>

          </li>

        </ul>

        <!--分页-->
        <div align="center" class="pageController">
          <a href="#" @click="pageList(1)" :class="{page_a:!pageInfo.hasPrevious}">首页</a>
          <a href="#" :class="{page_a:!pageInfo.hasPrevious}" @click="pageList(pageInfo.current-1)">&lt;</a>
          当前第{{pageInfo.current}}页
          <a href="#" @click="pageList(pageInfo.current+1)" :class="{page_a:!pageInfo.hasNext}">&gt;</a>
          <a href="#" @click="pageList(pageInfo.pages)" :class="{page_a:!pageInfo.hasNext}">尾页</a>
          共{{pageInfo.pages}}页
        </div>
      </div>

    </div>
</template>

<script>

  import teacher from '../api/teacher'
    export default {
        name: "teacherIndex",
      data(){
          return{
            pageInfo:[]//分页数据
          }
      },
      created(){
          this.pageList(1)
      },
      methods:{
          //讲师分页查询
        pageList(page){
          teacher.pageList(page,6)
            .then(response=>{
              this.pageInfo = response.data
            })
        }


      }

    }
</script>

<style scoped>
#teacherList li{
  padding-top: 20px;
  list-style: none;
  border: 1px solid;
  width: 300px;
  height: 220px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  margin-top: 20px;
  margin-left: 40px;
}
.page_a{
  pointer-events: none;
  color: gray;
}
.pageController a{
  background: #F2F6FC;
  border-radius: 50%;
  display: inline-block;
  height: 50px;
  width: 50px;
}
.pageController{
  line-height: 50px;
}
</style>
